<template>
  <!-- 构造具体的表单,子表单除外 -->

  <div :class="getRootClass()">
    <div v-if="parentContainer">
      <div>
        <el-form-item
          class="widget-view"
          v-if="
            element &&
              element.key &&
              element.type != 'divider' &&
              element.type != 'grid'
          "
          :class="{
            active: selectWidget.key == element.key && element.type != 'grid',
            is_req: element.options.required,
            display: 'block'
          }"
          :label="getLable(element)"
          @click.native.stop="handleSelectWidget(index)"
        >
          <widget-element-item
            :element="element"
            :is-table="false"
            label-class-name="workOrderStyle"
          ></widget-element-item>
          <div
            class="widget-view-action"
            v-if="selectWidget.key == element.key && element.type != 'grid'"
          >
            <!-- 复制, 删除图标 -->
            <button
              type="button"
              class="show-circle action-clone"
              @click.stop="handleWidgetClone(index)"
            >
              <i class="iconfont icon-icon_clone"></i>
            </button>
            <button
              type="button"
              class="show-circle action-delete"
              @click.stop="handleWidgetDelete(index)"
            >
              <i class="iconfont icon-trash"></i>
            </button>
          </div>
        </el-form-item>
      </div>
    </div>
    <div v-else>
      <el-col
        class="drag-widget field-item"
        :span="element.options.span < 6 ? 6 : element.options.span"
      >
        <el-form-item
          class="widget-view"
          v-if="element && element.key && element.type != 'divider'"
          :class="{
            active: selectWidget.key == element.key,
            is_req: element.options.required,
            display: 'block'
          }"
          :label="getLable(element)"
          @click.native.stop="handleSelectWidget(index)"
        >
          <widget-element-item
            :element="element"
            :is-table="false"
            label-class-name="workOrderStyle"
          ></widget-element-item>
          <div
            class="widget-view-action"
            v-if="selectWidget.key == element.key"
          >
            <!-- 复制, 删除图标 -->
            <button
              type="button"
              class="show-circle action-clone"
              @click.stop="handleWidgetClone(index)"
            >
              <i class="iconfont icon-icon_clone"></i>
            </button>
            <button
              type="button"
              class="show-circle action-delete"
              @click.stop="handleWidgetDelete(index)"
            >
              <i class="iconfont icon-trash"></i>
            </button>
          </div>
        </el-form-item>
      </el-col>
    </div>

    <!-- 分割线的生成 -->
    <!--	<el-col  class="widget-view no-put"-->
    <!--      v-if="element && element.key && element.type == 'dividers'"-->
    <!--      :class="{active: selectWidget.key == element.key}"-->
    <!--      @click.stop="handleSelectWidget(index)"-->
    <!--      style="padding-bottom: 0;">-->

    <!--      <el-divider >-->
    <!--      </el-divider>-->

    <!--	  </el-col>-->
  </div>
</template>
<script>
import WidgetElementItem from "./WidgetElementItem";
import WidgetConfig from "./WidgetConfig";
import { getLable } from "./js/formUtils.js";

export default {
  props: ["element", "select", "index", "data", "parentContainer"], // 父组件穿递的值
  components: {
    WidgetConfig,
    WidgetElementItem
  },
  data() {
    return {
      selectWidget: this.select
    };
  },

  created() {
    //  console.log( this.select);
  },
  methods: {
    getRootClass: function() {
      if (this.parentContainer) {
        return "";
      } else {
        return "widget-view-drag";
      }
    },
    getData: function() {},
    getLable: function(element) {
      return getLable(element);
    },
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index];
    },
    handleWidgetDelete(index) {
      if (this.data.list.length == 1) {
        this.$emit("select-change", -1);
      } else {
        if (this.data.list.length - 1 == index) {
          this.$emit("select-change", index - 1);
        } else {
          this.$emit("select-change", index);
        }
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
    handleWidgetClone(index) {
      const key = new Date().getTime() + "";
      let cloneData = {
        ...this.data.list[index],
        options: { ...this.data.list[index].options },
        key,
        model: this.data.list[index].type + key
      };

      if (Object.keys(this.data.list[index].options).includes("options")) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({ ...item }))
          }
        };
      }

      this.data.list.splice(index, 0, cloneData);

      this.$nextTick(() => {
        this.selectWidget = this.data.list[index + 1];
      });
    }
  },
  watch: {
    select(val) {
      // 除第一次之外的表单触发
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        //第一次拖拽表单时触发
        this.$emit("update:select", val);
      },
      deep: true
    }
  }
};
</script>
<style>
.el-col-md-8 {
  width: 33.33333%;
}

.el-col-md-offset-8 {
  margin-left: 33.33333%;
}

.el-col-md-pull-8 {
  position: relative;
  right: 33.33333%;
}

.el-col-md-push-8 {
  position: relative;
  left: 33.33333%;
}

.el-col-md-9 {
  width: 37.5%;
}

.el-col-md-offset-9 {
  margin-left: 37.5%;
}

.el-col-md-pull-9 {
  position: relative;
  right: 37.5%;
}

.el-col-md-push-9 {
  position: relative;
  left: 37.5%;
}

.el-col-md-10 {
  width: 41.66667%;
}

.el-col-md-offset-10 {
  margin-left: 41.66667%;
}

.el-col-md-pull-10 {
  position: relative;
  right: 41.66667%;
}

.el-col-md-push-10 {
  position: relative;
  left: 41.66667%;
}

.el-col-md-11 {
  width: 45.83333%;
}

.el-col-md-offset-11 {
  margin-left: 45.83333%;
}

.el-col-md-pull-11 {
  position: relative;
  right: 45.83333%;
}

.el-col-md-push-11 {
  position: relative;
  left: 45.83333%;
}

.el-col-md-12 {
  width: 50%;
}

.el-col-md-offset-12 {
  margin-left: 50%;
}

.el-col-md-pull-12 {
  position: relative;
  right: 50%;
}

.el-col-md-push-12 {
  position: relative;
  left: 50%;
}

.el-col-md-13 {
  width: 54.16667%;
}

.el-col-md-offset-13 {
  margin-left: 54.16667%;
}

.el-col-md-pull-13 {
  position: relative;
  right: 54.16667%;
}

.el-col-md-push-13 {
  position: relative;
  left: 54.16667%;
}

.el-col-md-14 {
  width: 58.33333%;
}

.el-col-md-offset-14 {
  margin-left: 58.33333%;
}

.el-col-md-pull-14 {
  position: relative;
  right: 58.33333%;
}

.el-col-md-push-14 {
  position: relative;
  left: 58.33333%;
}

.el-col-md-15 {
  width: 62.5%;
}

.el-col-md-offset-15 {
  margin-left: 62.5%;
}

.el-col-md-pull-15 {
  position: relative;
  right: 62.5%;
}

.el-col-md-push-15 {
  position: relative;
  left: 62.5%;
}

.el-col-md-16 {
  width: 66.66667%;
}

.el-col-md-offset-16 {
  margin-left: 66.66667%;
}

.el-col-md-pull-16 {
  position: relative;
  right: 66.66667%;
}

.el-col-md-push-16 {
  position: relative;
  left: 66.66667%;
}

.el-col-md-17 {
  width: 70.83333%;
}

.el-col-md-offset-17 {
  margin-left: 70.83333%;
}

.el-col-md-pull-17 {
  position: relative;
  right: 70.83333%;
}

.el-col-md-push-17 {
  position: relative;
  left: 70.83333%;
}

.el-col-md-18 {
  width: 75%;
}

.el-col-md-offset-18 {
  margin-left: 75%;
}

.el-col-md-pull-18 {
  position: relative;
  right: 75%;
}

.el-col-md-push-18 {
  position: relative;
  left: 75%;
}

.el-col-md-19 {
  width: 79.16667%;
}

.el-col-md-offset-19 {
  margin-left: 79.16667%;
}

.el-col-md-pull-19 {
  position: relative;
  right: 79.16667%;
}

.el-col-md-push-19 {
  position: relative;
  left: 79.16667%;
}

.el-col-md-20 {
  width: 83.33333%;
}

.el-col-md-offset-20 {
  margin-left: 83.33333%;
}

.el-col-md-pull-20 {
  position: relative;
  right: 83.33333%;
}

.el-col-md-push-20 {
  position: relative;
  left: 83.33333%;
}

.el-col-md-21 {
  width: 87.5%;
}

.el-col-md-offset-21 {
  margin-left: 87.5%;
}

.el-col-md-pull-21 {
  position: relative;
  right: 87.5%;
}

.el-col-md-push-21 {
  position: relative;
  left: 87.5%;
}

.el-col-md-22 {
  width: 91.66667%;
}

.el-col-md-offset-22 {
  margin-left: 91.66667%;
}

.el-col-md-pull-22 {
  position: relative;
  right: 91.66667%;
}

.el-col-md-push-22 {
  position: relative;
  left: 91.66667%;
}

.el-col-md-23 {
  width: 95.83333%;
}

.el-col-md-offset-23 {
  margin-left: 95.83333%;
}

.el-col-md-pull-23 {
  position: relative;
  right: 95.83333%;
}

.el-col-md-push-23 {
  position: relative;
  left: 95.83333%;
}

.el-col-md-24 {
  width: 100%;
}

.el-col-md-offset-24 {
  margin-left: 100%;
}

.el-col-md-pull-24 {
  position: relative;
  right: 100%;
}

.el-col-md-push-24 {
  position: relative;
  left: 100%;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  font-size: 12px;
  color: #545252 !important;
  padding: 0px 10px !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 30px;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  float: left;
  width: 95px;
  cursor: pointer;
}
.field-item {
  min-width: 120px;
  min-height: 70px;
  vertical-align: top;
  display: inline-block;
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  margin: 0px;
  padding: 0px 10px;
}
.el-form-item__content.el-input,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  /* width: 100%  !important; */
  width: 100%;
}
</style>
